<template>
	<view class="su-searchbar">
		<view :style="{borderRadius:radius+'rpx',height:compHeight+'rpx',justifyContent:textAlign}" 
			class="su-searchbar-box" @click="searchClick">
			<view class="su-searchbar-box-icon">
				<text class="iconfont su-icon-search">&#xe616;</text>
			</view>
			<input v-if="show" :focus="showSync" :placeholder="placeholder" 
			@confirm="confirm" class="su-searchbar-search-input"
			 confirm-type="search" type="text" v-model="searchVal" />
			<text v-else class="su-searchbar-placeholder">{{ placeholder }}</text>
			<view v-if="show && (clearButton==='always'||clearButton==='auto'&&searchVal!=='')" 
				  class="su-searchbar-icon-clear" @click="clear">
				<text class="iconfont icon-clear"></text>
			</view>
		</view>
		<text @click="cancel" class="su-searchbar-cancel" v-if="show">取消</text>
	</view>
</template>

<script>
	export default {
		name: "suiSearchBar",
		components: {
		},
		props: {
			placeholder: {
				type: String,
				default: "请输入搜索内容"
			},
			radius: {
				type: [Number, String],
				default: 68
			},
			clearButton: {
				type: String,
				default: "auto"
			},
			compHeight:{
				type: [Number, String],
				default: "68"
			},
			textAlign:{
				type: String,
				default: "left"
			},
			directClick:{
				type:Boolean,
				default:false
			},
			value:{
				type:String,
				default:""
			}
		},
		data() {
			return {
				show: false,
				showSync: false,
				searchVal:""
			}
		},
		mounted() {
			this.searchVal = this.value
			if(this.searchVal) {
				this.searchClick()
			}
		},
		watch: {
			searchVal() {
				this.$emit("input", {
					value: this.searchVal
				})
			}
		},
		methods: {
			searchClick() {
				if(this.directClick) {
					return this.$emit("confirm", {
						value: ""
					})
				}
				//this.searchVal = ""
				this.show = true;
				this.$nextTick(()=>{
					this.showSync = true;
				})
			},
			clear() {
				this.searchVal = "";
				this.showSync = false;
				this.$nextTick(()=>{
					this.showSync = true;
				})
			},
			cancel() {
				this.searchVal = ""
				this.show = false
				this.showSync = false
				// #ifndef APP-PLUS
				uni.hideKeyboard()
				// #endif
				// #ifdef APP-PLUS
				plus.key.hideSoftKeybord()
				// #endif
				this.$emit("cancel", {
					value: this.searchVal
				});
			},
			propValue(){
				// #ifndef APP-PLUS
				uni.hideKeyboard();
				// #endif
				// #ifdef APP-PLUS
				plus.key.hideSoftKeybord()
				// #endif
				return this.searchVal
			},
			confirm() {
				// #ifndef APP-PLUS
				uni.hideKeyboard();
				// #endif
				// #ifdef APP-PLUS
				plus.key.hideSoftKeybord()
				// #endif
				this.$emit("confirm", {
					value: this.searchVal
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.su-searchbar {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		position: relative;
		align-items: center;
	}
	.su-searchbar-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		overflow: hidden;
		position: relative;
		flex: 1;
		flex-direction: row;
		align-items: center;
		/* height: 68upx; */
		/* border-radius: 68upx; */
		background-color: #f4f4f4;
		padding-left: 25upx;
		padding-right: 25upx;
	}

	.su-searchbar-box .su-icon-search {
		width: 64upx;
		color: #999999;
		font-size: 28upx;
	}

	.su-searchbar-search-input {
		flex: 1;
		font-size: 28upx;
		color: #434343;
		margin-left: 15upx;
		text-align: left;
	}

	.su-searchbar-icon-clear {
		align-items: center;
		line-height: 0upx;
		padding: 0upx 18upx;
		position: absolute;
		right: 0;
	}

	.su-searchbar-placeholder {
		font-size:28upx;
		color: #999999;
		margin-left: 15upx;
	}

	.su-searchbar-cancel {
		padding-left: 15px;
		font-size: 28upx;
		color:$maincolor;
	}
</style>
